import React from 'react'
// DOM样式
// 1.行内样式
// 2.class样式 ---- class 在react关键字  ---- class ===> className
//    可以把css文件当成模块来使用
// 3.不同的条件添加不同的样式
class App extends React.Component {
  // 初始化状态
  state = {
    flag: false
  }
  render () {
    // 渲染的结果就这
    // <button class="btn btn-success"></button>
    // <button class="btn btn-fail"></button>

    let str = 'btn'
    // 判断
    if (this.state.flag) { // 组件的实例的属性的值
      str += ' btn-success'
    } else {
      str += ' btn-fail'
    }
    return (
      <>
        {/* 行内样式 */}
        <div style = { { color: 'red', fontSize: '30px'} }>欢迎来到react的世界</div>
        <div className="active">class样式</div>
        <button className= {str}>按钮</button>
      </>
    )
  }
}

export default App